<template>
  <div class="div_page_box">
    <div class="div_page_left">
      <div class="div_page_img">
        <div class="div_page_1">
          <img src="../../public/27.jpg" />
          <div class="div_page_2">
            <p>admin</p>
            <p>超级管理员</p>
          </div>
        </div>
        <hr />
        <div class="div_page_3">
          <p>
            <span>上次登录时间： 2019-11-01</span>
          </p>
          <p>
            <span>上次登录地点： 东莞</span>
          </p>
        </div>
      </div>
      <div class="div_page_bottom">
        <h3>语言详情</h3>
        <hr />
        <!-- 组件 -->
        <div></div>
      </div>
      <!-- 图表 -->
      <div id="div3"></div>




    </div>
    <div class="div_page_right">
      <el-row :gutter="20">
        <el-col :span="8"><div class="grid-content bg-purple">1</div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple">2</div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple">3</div></el-col>
      </el-row>
      <div class="div_page_right_1">
        <div class="div_page_right_2">
          <h3>待办事项</h3>
          <a href="#">添加</a>
        </div>
      </div>

      <!-- 图表 -->
      <div id="div4"></div>
    </div>
  </div>
</template>
<script>
import echarts from "echarts";
export default {
  data() {
    return {
      option: {
        title: {
          text: "堆叠区域图",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          data: ["邮件营销", "联盟广告", "视频广告", "直接访问", "搜索引擎"],
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "邮件营销",
            type: "line",
            stack: "总量",
            areaStyle: {},
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: "联盟广告",
            type: "line",
            stack: "总量",
            areaStyle: {},
            data: [220, 182, 191, 234, 290, 330, 310],
          },
          {
            name: "视频广告",
            type: "line",
            stack: "总量",
            areaStyle: {},
            data: [150, 232, 201, 154, 190, 330, 410],
          },
          {
            name: "直接访问",
            type: "line",
            stack: "总量",
            areaStyle: {},
            data: [320, 332, 301, 334, 390, 330, 320],
          },
          {
            name: "搜索引擎",
            type: "line",
            stack: "总量",
            label: {
              normal: {
                show: true,
                position: "top",
              },
            },
            areaStyle: {},
            data: [820, 932, 901, 934, 1290, 1330, 1320],
          },
        ],
      },
      option1: {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(220, 220, 220, 0.8)",
            },
          },
        ],
      },
    };
  },
  mounted() {
    var myChart = echarts.init(document.getElementById("div3"));
    myChart.setOption(this.option);
    var twChart = echarts.init(document.getElementById("div4"));
    twChart.setOption(this.option1);
    // 图表自适应
    window.onresize = function () {
      myChart.resize();
      twChart.resize();
    };
  },
};
</script>


<style lang="scss">
.div_page_box {
  margin: 10px;
  width: 100%;
  //   background: lime;
  height: 100%;
  display: flex;
  .div_page_left {
    width: 30%;
    height: 100%;
    // background: rgb(76, 199, 5);
    .div_page_img {
      width: 100%;
      background: white;
      border-radius: 10px;
      height: 200px;
      border: 2px solid ghostwhite;
      .div_page_1 {
        display: flex;
        margin: 30px;
        img {
          width: 80px;
          border-radius: 80px;
        }
        .div_page_2 {
          margin: 20px;
        }
      }
    }
    .div_page_3 {
      width: 100%;
      margin: 10px;
      color: gainsboro;
    }
    .div_page_bottom {
      width: 100%;
      height: 300px;
      background: rgb(250, 244, 244);
      margin-top: 10px;
      border-radius: 10px;
      h3 {
        margin: 10px;
        height: 30px;
        padding-top: 15px;
      }
    }
  }
  .div_page_right {
    margin-left: 10px;
    width: 69%;
    height: 100%;
    // background: salmon;
  }
}
hr {
  width: 350px;
  border: 2px;
  margin: 0 auto;
  border: 1px solid ghostwhite;
  text-align: center;
}

.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 90px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.div_page_right_1 {
  width: 100%;
  height: 405px;
  background: white;
  border-radius: 10px;
}
.div_page_right_2 {
  display: flex;
  justify-content: space-between;
  h3 {
    width: 80%;
    height: 30px;
    border-bottom: 1px solid gainsboro;
    padding: 10px;
  }
  a {
    margin-right: 20px;
    margin-top: 10px;
    color: lightskyblue;
  }
}
#div3 {
  margin-top: 10px;
  background: white;
  border-radius: 10px;
  width: 100%;
  // background: skyblue;
  height: 300px;
}
#div4 {
  margin-top: 10px;
  background: white;
  border-radius: 10px;
  width: 100%;
  // background: skyblue;
  height: 300px;
}

</style>